<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>:valid and :invalid example</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
    <style>
    </style>
</head>
<style>
	* {
			box-sizing: border-box;
		} 

		.item{
			display: block;
      margin-bottom: 6px;
		}

	  label{
			display: inline-block;
      width: 120px;
      text-align: right;
		}

		input{
			width: 200px;
			height: 30px;
			padding: 2px 10px;
			border:1px solid #ccc;
			border-radius: 5px;
      /* 获取焦点是的边框去除 */
			outline:none;
			line-height: 24px;
			font-size:14px; 
		}

		.tip{
			
      display:block;
			margin-top: 10px;
			color: #666;
			font-size: 10px;
      margin-left: 120px;
		}

		.tip--hidden{
			display: none;
		} 
		
		.input--error {
			border-color: red;
		}
		.input--success {
			border-color: green;
		}
    .input--focus{
      border-color: blue;
    }                                                                                                                                                            
		.tip--error {
			color: red;
		}
		.tip--success {
			color: green;
		}
		.item_btn {
			width: 60px;
			height: 30px;
			padding: 0 10px;
			line-height: 28px;
			border: 1px solid #6a8fb9;
			border-radius: 5px;
			outline:none;
			color: #fff;
			background-color: #4379b5;
			cursor: pointer;
		}
</style>
<body>
    <form>
      <fieldset>
        <legend>my form</legend>
        <div class="item">
          <label for="name">名称: </label>
          <input id="name" name="name" type="text" required>
      		<span id="name_tip" class="tip tip--hidden">必填，长度为 4 ~ 10 个字符</span>
        </div>
        <div class="item">
          <label for="password">密码: </label>
          <input id="password" name="password" type="text" required>
          <span id="password_tip" class="tip tip--hidden">必填，长度为 4 ~ 10 个字符</span>
        </div>
        <div class="item">
          <label for="checkPassword">密码确认: </label>
          <input id="checkPassword" name="checkPassword" type="text" required>
          <span id="checkPassword_tip" class="tip tip--hidden">必填，长度为 4 ~ 10 个字符</span>
        </div>
        <div class="item">
          <label for="email">邮箱: </label>
          <input id="email" name="email" type="text" required>
          <span id="email_tip" class="tip tip--hidden">必填，长度为 4 ~ 10 个字符</span>
        </div>
        <div class="item">
          <label for="tel">手机: </label>
          <input id="tel" name="tel" type="tel" required>
          <span id="tel_tip" class="tip tip--hidden">必填，长度为 4 ~ 10 个字符</span>
        </div>
        <div><button class="item_btn">Submit</button></div>
      </fieldset>
    </form>
    
</body>
  <script>
    //简易封装jquery
    function $ (s) {
			return document.querySelector(s)      
		}
     function addClass(element,value) {
      if (!element.className) {
          element.className = value;
      } else {
          newClassName = element.className;
          newClassName += " "; //这句代码追加的类名分开
          newClassName += value;
          element.className = newClassName;
      }
    }
		function removeClass (element,value) {      //node为name_input或者name_tip    ;    className为class     removeClass(input,'input--error')
      var classList = element.className.split(' ').filter( function(item,index,arr) {
        return item!==value;
      }) ;            
      element.className = classList.join(' ');                         //目的是什么？  为了先把各种颜色和提示清除掉，就是把各个node的属性类去除掉；
		}
    //验证是否为空
		function isEmpty(input) {
			var value = input.value;
			if( !value.trim() ) {
				return true;
			}
			return false;
		}
    	 //获取一个字符串的长度
		function getLength (value) {
			var len = 0;
			for(var s of value) {
				if(s.charCodeAt(0) <= 0xFF){
					len += 1;
				}else{
					len += 2
				}
			} //console.log(len);
			return len;
		}

		// 验证长度是否在规定范围内
		//参数都是可以变的，主要清楚你现在操作的对象是谁，你需要实现的功能是什么？
		function validateLong (min,max,value) {
			var len = getLength(value);
			if( len < min || len > max ){
				return false;
			}else{
				return true;
			}
		}
	 //渲染提示内容以及输入框边框颜色
   function renderTip (input,tip,content,state) {    //给予建议 ；内容，情况
			// removeClass(tip,'tip--hidden');
        addClass(input,'input--' + state);
			addClass(tip,'tip--' + state);
			tip.innerText = content;
		}
		/* 重置表单
		 */
		function reset (input,tip) {
			removeClass(input,'input--error')
			removeClass(tip,'tip--error')
      removeClass(input,'input--focus')
			removeClass(input,'input--success')
			removeClass(tip,'tip--success')
		}
    document.body.onload = function(){
      //将nodelist转化为数组
      var inputs = Array.from(document.querySelectorAll('input'))
			inputs.forEach( function(item){                       //为每一个input绑定获取焦点函数
				return item.onfocus = function(event) {
					var tips = event.target.nextElementSibling;  //
          if(event.target.className==''){
            addClass(event.target,'input--focus')
          }
					removeClass(tips,'tip--hidden')
				};
			})
      //检查名称
      function checkName() {
				var nameInput = document.getElementById("name");
				var nameTip = document.getElementById("name_tip");
				reset(nameInput,nameTip)
				// 判断是否为空
				if( isEmpty(nameInput) ){
					renderTip(nameInput,nameTip,'姓名不能为空','error')   //给予建议提示
					return false
				};
				// 判断输入是否合格
				if ( !validateLong(4,16,nameInput.value) ) {           //不合格
					renderTip(nameInput,nameTip,'请检查输入的字符长度','error')
					return false;
				}else{                                                //合格的话
					renderTip(nameInput,nameTip,'校验成功','success');
					return true;
				}
			};
				$('#name').onblur = checkName;   //函数的调用还是不太熟悉,什么时候加括号；
    }
  </script>
</html>
